<template>
    <div>
      <div v-for="(level, index) in selectedLevels" :key="index">
        <a-select
          v-model="selectedValues[index]"
          :placeholder="`请选择${index + 1}级选项`"
          @change="handleSelectChange(index)"
        >
          <a-select-option
            v-for="item in getOptionsForLevel(index)"
            :key="item.id"
            :value="item.id"
          >{{ item.name }}</a-select-option>
        </a-select>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, watch, computed } from 'vue';
  
  export default defineComponent({
    name: 'DynamicDropdown',
    props: {
      treeData: {
        type: Array as () => Array<any>,
        required: true
      }
    },
    setup(props) {
      // 存储每一层级下拉列表的选中值
      const selectedValues = ref([]);
      // 存储已选择的层级数量，用于动态渲染select组件
      const selectedLevels = ref([]);
  
      // 根据当前层级获取对应的下拉列表选项数据
      const getOptionsForLevel = (levelIndex: number) => {
        if (levelIndex === 0) {
          return props.treeData;
        } else {
          const parentId = selectedValues.value[levelIndex - 1];
          const parentNode = findNodeById(parentId, props.treeData);
          return parentNode?.children || [];
        }
      };
  
      // 根据id查找节点
      const findNodeById = (id: any, data: any[]) => {
        for (let i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            return data[i];
          }
          if (data[i].children) {
            const foundNode = findNodeById(id, data[i].children);
            if (foundNode) {
              return foundNode;
            }
          }
        }
        return null;
      };
  
      // 处理下拉列表值改变的事件
      const handleSelectChange = (levelIndex: number) => {
        const selectedValue = selectedValues.value[levelIndex];
        const children = getChildrenForSelectedValue(selectedValue);
  
        if (levelIndex === selectedValues.value.length - 1) {
          if (children.length > 0) {
            // 如果当前是最后一层且有子项，则添加新的层级到已选层级数组
            selectedLevels.value.push(levelIndex + 1);
            selectedValues.value.push(null);
          } else {
            // 如果当前是最后一层且无子项，不做任何操作，保持当前状态
          }
        } else {
          if (children.length > 0) {
            // 如果不是最后一层且有子项，更新下一层级的选中值为null，以便重新选择
            selectedValues.value[levelIndex + 1] = null;
          } else {
            // 如果不是最后一层且无子项，删除后续的层级信息
            selectedValues.value = selectedValues.value.slice(0, levelIndex + 1);
            selectedLevels.value = selectedLevels.value.slice(0, levelIndex + 1);
          }
        }
      };
  
      // 获取选中节点的子节点
      const getChildrenForSelectedValue = (selectedValue: any) => {
        const parentNode = findNodeById(selectedValue, props.treeData);
        return parentNode?.children || [];
      };
  
      // 当props.treeData改变时，重置相关状态
      watch(props.treeData, () => {
        selectedValues.value = [];
        selectedLevels.value = [];
      });
  
      return {
        selectedValues,
        selectedLevels,
        handleSelectChange,
        getOptionsForLevel
      };
    },
  });
  </script>
  
  <style scoped>
  </style>